<template>
  <div class="app-container">
    <!-- 文本过滤输入框 -->
    <el-input v-model="filterText" placeholder="请输入文本进行过滤"></el-input>
    <!-- tree 课程 -->
    <el-tree
      :data="subjectList"
      :props="defaultProps"
      ref="refTree"
      :filter-node-method="filterNode"
    ></el-tree>
  </div>
</template>
<script>
import subject from "../../api/subject";
export default {
  data() {
    return {
      filterText: "", //过滤文本
      subjectList: [], //数据列表
      defaultProps: {
        children: "children",
        label: "title",
      },
    };
  },
  created() {
    this.getSubjectTree();
  },
  methods: {
    /**
     * tree过滤文本
     * @param {*} val  输入的文本
     * @param {*} data 每一个节点的title比较
     * toLowerCase() 转化成小写
     */
    filterNode(val, data) {
      if (!val) return true;
      return data.title.toLowerCase().indexOf(val.toLowerCase()) !== -1;
    },
    /**
     * 初始化tree节点的数据 调用后端的数据
     */
    getSubjectTree() {
      subject.getSubjectTreeList().then((resp) => {
        if (resp) {
          this.subjectList = resp.data.items;
        }
      });
    },
  },
  /**
   * 监听文本内容变化进行过滤
   */
  watch: {
    filterText(val) {
      this.$refs.refTree.filter(val);
    },
  },
};
</script>

<style></style>
